<template>
  <div class="body">
    <h3>经费预算（单位：元）</h3>
    <div class="top">
      <div>
        <p><i>*</i>财政拨款:</p>
        <el-input v-model="input" style="width: 240px" placeholder="请输入..." />
      </div>
      <div>
        <p><i>*</i>学校拨款:</p>
        <el-input v-model="input" style="width: 240px" placeholder="请输入..." />
      </div>
      <div>
        <p><i>*</i>申请金额合计:</p>
        <el-input v-model="input" style="width: 240px" placeholder="请输入..." />
      </div>
    </div>
    <h3>具体开支（单位：元）</h3>
    <div class="bottom">
      <div class="content">
        <dl class="title">
          <dt>开支科目</dt>
          <dd>预算经费</dd>
          <dd>主要用途</dd>
          <dd>前半阶段</dd>
          <dd>后半阶段</dd>
        </dl>
        <div class="innovativeTraining" v-if="num === 0">
          <dl v-for="(item, index) in innovativeTrainingWithInputs" :key="index">
            <dt>{{ item.name }}</dt>
            <dd><input type="text" v-model="item.input1" /></dd>
            <dd><input type="text" v-model="item.input2" /></dd>
            <dd><input type="text" v-model="item.input3" /></dd>
            <dd><input type="text" v-model="item.input4" /></dd>
          </dl>
        </div>
        <div class="entrepreneurshipTraining" v-else-if="num === 1">
          <dl v-for="(item, index) in entrepreneurshipTrainingWithInputs" :key="index">
            <dt>{{ item.name }}</dt>
            <dd><input type="text" v-model="item.input1" /></dd>
            <dd><input type="text" v-model="item.input2" /></dd>
            <dd><input type="text" v-model="item.input3" /></dd>
            <dd><input type="text" v-model="item.input4" /></dd>
          </dl>
        </div>
        <div class="entrepreneurshipPractice" v-else>
          <dl v-for="(item, index) in entrepreneurshipPracticeWithInputs" :key="index">
            <dt>{{ item.name }}</dt>
            <dd><input type="text" v-model="item.input1" /></dd>
            <dd><input type="text" v-model="item.input2" /></dd>
            <dd><input type="text" v-model="item.input3" /></dd>
            <dd><input type="text" v-model="item.input4" /></dd>
          </dl>
        </div>
      </div>
    </div>
    <el-button @click="isShow">切换</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const num = ref(2)
const innovativeTraining = reactive([
  { name: '1. 业务费' },
  { name: '（1）计算、分析、测试费' },
  { name: '（2）能源动力费' },
  { name: '（3）会议、差旅费' },
  { name: '（4）文献检索费' },
  { name: '（5）论文出版费' },
  { name: '2. 仪器设备购置费' },
  { name: '3. 实验装置试制费' },
  { name: '4. 材料费' }
])

const innovativeTrainingWithInputs = reactive(
  innovativeTraining.map((item) => ({
    ...item,
    input1: '',
    input2: '',
    input3: '',
    input4: ''
  }))
)

const entrepreneurshipTraining = reactive([
  { name: '1. 业务费' },
  { name: '（1）能源动力费' },
  { name: '（2）会议费' },
  { name: '（3）差旅费' },
  { name: '（4）文献检索费' },
  { name: '（5）论文出版费' },
  { name: '2. 仪器设备购置费' },
  { name: '3. 材料费' }
])

const entrepreneurshipTrainingWithInputs = reactive(
  entrepreneurshipTraining.map((item) => ({
    ...item,
    input1: '',
    input2: '',
    input3: '',
    input4: ''
  }))
)

const entrepreneurshipPractice = reactive([
  { name: '1. 业务费' },
  { name: '（1）能源动力费' },
  { name: '（2）会议费' },
  { name: '（3）差旅费' },
  { name: '（4）文献检索费' },
  { name: '（5）论文出版费' },
  { name: '2. 仪器设备购置费' },
  { name: '3. 材料费' },
  { name: '4. 咨询费' }
])

const entrepreneurshipPracticeWithInputs = reactive(
  entrepreneurshipPractice.map((item) => ({
    ...item,
    input1: '',
    input2: '',
    input3: '',
    input4: ''
  }))
)

const isShow = () => {
  num.value = num.value++ > 1 ? (num.value = 0) : num.value++

  console.log(innovativeTrainingWithInputs)
}
</script>

<style lang="less" scoped>
.body {
  margin: 20px 40px;
  padding: 30px 40px;
  h3 {
    color: #196adc;
    margin-bottom: 20px;
  }
  p {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
    i {
      color: red;
      margin-right: 5px;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    div {
      display: flex;
      height: 30px;
      line-height: 30px;
      p {
        margin-right: 20px;
      }
    }
  }

  .bottom {
    .content {
      .title {
        background-color: #1461cd;
        color: #fff;
        border: 0;
      }
      dl {
        display: flex;
        justify-content: space-between;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
        border: 1px solid #ccc;
        dt {
          width: 25%;
          // border: 1px solid #ccc;
          // border-bottom: 0;
          // &:last-child {
          border-right: 1px solid #ccc;
          // }
          // margin: 1px 1px;
        }

        dd {
          width: 25%;
          // border: 1px solid #ccc;
          // background-color: pink;
          // margin: 1px 1px;
          border-right: 1px solid #ccc;
          input {
            border: 0;
            outline: none;
            width: 100%;
            height: 32px;
            // line-height: 28px;
            border-bottom: 1px solid #ccc;
            padding: 0 10px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
